<template>
  <div class="register-container">
    <h2>注册页面</h2>
    <el-form @submit.native.prevent="register" class="register-form">
      <el-form-item label="学号" :label-width="'100px'">
        <el-input
            v-model="user.stuId"
            type="text"
            placeholder="请输入学号"
            class="input-field"
        />
      </el-form-item>

      <el-form-item label="用户名" :label-width="'100px'">
        <el-input
            v-model="user.id"
            type="text"
            placeholder="请输入用户名"
            class="input-field"
        />
      </el-form-item>

      <el-form-item label="密码" :label-width="'100px'">
        <el-input
            v-model="user.password"
            type="password"
            placeholder="请输入密码"
            class="input-field"
        />
      </el-form-item>

      <el-form-item label="年龄" :label-width="'100px'">
        <el-input
            v-model="user.age"
            type="number"
            placeholder="请输入年龄"
            class="input-field"
        />
      </el-form-item>

      <el-form-item label="性别" :label-width="'100px'">
        <el-radio-group v-model="user.sex">
          <el-radio :label="true">男</el-radio>
          <el-radio :label="false">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" round native-type="submit" class="submit-btn">注册</el-button>
        <el-button type="danger" round @click="reset" class="reset-btn">重置</el-button>
      </el-form-item>
    </el-form>

    <p v-if="registrationFailed" class="error-message">注册失败，请重试。</p>
    <p v-if="registrationSuccess" class="success-message">注册成功！请登录。</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';

const user = ref({
  stuId: '',
  id: '',
  password: '',
  age: '',
  sex: true,
});

const registrationSuccess = ref(false);
const registrationFailed = ref(false);

const register = () => {
  const requestBody = {
    stuId: user.value.stuId,
    id: user.value.id,
    name: user.value.id,  // Assuming the name is same as the username
    password: user.value.password,
    age: user.value.age,
    sex: user.value.sex,
  };

  console.log('请求体：', requestBody);

  axios
      .post('http://localhost:8085/lizhan/api/User/Register', requestBody, {
        headers: { 'Content-Type': 'application/json' },
      })
      .then((res) => {
        console.log('响应体: ', res.data);
        registrationFailed.value = false;
        registrationSuccess.value = true;
      })
      .catch((err) => {
        console.error('注册失败：', err.response?.data);
        registrationFailed.value = true;
        registrationSuccess.value = false;
      });
};

const reset = () => {
  user.value.stuId = '';
  user.value.id = '';
  user.value.password = '';
  user.value.age = '';
  user.value.sex = true;
};
</script>

<style scoped>
/* 背景渐变效果 */
body {
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, #42b983, #34495e);
  font-family: 'Arial', sans-serif;
  color: white;
  overflow: hidden;
}

/* 容器居中并优化对齐 */
.register-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  animation: fadeIn 1s ease-out;
}

/* 渐变标题 */
h2 {
  font-size: 2.2rem;
  background: linear-gradient(90deg, #42b983, #34495e);
  -webkit-background-clip: text;
  color: transparent;
  text-align: center;
  margin-bottom: 30px;
  animation: slideIn 1s ease-out;
}

/* 表单的样式 */
.register-form {
  width: 100%;
  max-width: 320px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  animation: fadeInUp 1s ease-out;
}

/* 输入框样式 */
.input-field {
  width: 100%;
  margin-bottom: 20px;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #ddd;
  transition: all 0.3s ease;
}

.input-field:focus {
  border-color: #42b983;
  box-shadow: 0 0 10px rgba(66, 184, 131, 0.5);
}

/* 按钮样式 */
.el-button {
  width: 120px;
  margin: 10px;
  padding: 12px;
  border-radius: 4px;
  font-weight: bold;
  transition: all 0.3s ease;
}

/* 注册按钮 */
.submit-btn {
  background-color: #42b983;
  color: white;
  border: none;
}

.submit-btn:hover {
  background-color: #34b183;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 重置按钮 */
.reset-btn {
  background-color: #95a5a6;
  color: white;
  border: none;
}

.reset-btn:hover {
  background-color: #7f8c8d;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 成功和失败的消息样式 */
.error-message {
  color: #e74c3c;
  font-size: 1rem;
  margin-top: 20px;
  font-weight: bold;
  animation: fadeInMessage 1s ease-out;
}

.success-message {
  color: #2ecc71;
  font-size: 1rem;
  margin-top: 20px;
  font-weight: bold;
  animation: fadeInMessage 1s ease-out;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInMessage {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .register-form {
    width: 80%;
  }
}
</style>


